<template>
    <div style="height: 100vh;width: 100%;background-color: #1965b6;display: flex;justify-content: center;align-items: center;">
        <div style="width: 1000px;height: 600px;background-color: #fff;border-radius: 6px;display: flex;position: relative;">
            <div style="position: absolute;padding: 30px;">
                <img src="../../img/logo.png" alt="" srcset="" style="width: 150px;height: 60px;">
            </div>
            <div style="width: 60%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <div style="font-weight: bold;font-size: 26px;">欢迎登陆</div>
                <div style="font-size: 12px;color: #adb0be;margin-top: 10px;">请输入账号密码完成登录</div>
                <div style="margin-top: 50px;">
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                      <el-form-item label="">
                        <div style="display: flex;align-items: center;">
                            <el-icon :size="20" style="margin-right: 12px;"><User /></el-icon>
                            <el-input v-model="form.loginName" placeholder="点击输入密码" style="width: 250px;" />
                        </div>
                      </el-form-item>
                      <el-form-item label="" style="margin-top: 30px;">
                        <div style="display: flex;align-items: center;">
                            <el-icon :size="20" style="margin-right: 12px;"><Lock /></el-icon>
                            <el-input v-model="form.password" type="password" placeholder="点击输入用户名" style="width: 250px;" />
                        </div>
                      </el-form-item>

                      <el-form-item>
                        <div style="display: flex;justify-content:center;margin-top: 30px;width: 100%;">
                            <el-button type="primary" @click="onSubmit" style="width: 250px;">登录</el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                </div>
            </div>
            <div style="width: 40%;background-color: #1889f4;border-top-right-radius: 6px;border-bottom-right-radius: 6px;">
                <div style="height: 30%"></div>
                <div style="text-align: center;font-size: 24px;font-weight: bold;color: #fff;">
                    欢迎来到
                </div>
                <div style="text-align: center;font-size: 24px;font-weight: bold;color: #fff;margin-top: 5px;">
                    盛博灿科技有限公司
                </div>
                <div style="text-align: center;color: #fff;font-size: 12px;margin-top: 20px;">
                    Enter your personal details and start
                </div>
                <div style="text-align: center;color: #fff;font-size: 12px;">
                    journey width us
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import { onMounted,ref,watch } from 'vue'
    import { useRouter, useRoute } from "vue-router";
    import { $Login } from '../api/admin'
    import { $CompanyInfo } from '../api/base'
    const router = useRouter();
    let form = ref({})
    form.value = {
      loginName: 'admin',
      password:'123456',
    }
    onMounted(()=>{
      // loadInfo()
    })
    
    const loadInfo = async ()=>{
      let ret = await $CompanyInfo()
      console.log('ret',ret)
      sessionStorage.setItem('companyInfo',ret.rows)
    }

    const onSubmit = async () => {
      console.log('submit!')
      console.log(form.value)
      let ret = await $Login(form.value)
      console.log(ret)
      if(ret.code == 0){
        router.push('/home')
      }
      // console.log('ret',ret)
    }
  </script>
  
  <style scoped>

  </style>